// ES5面向对象拖拽插件
// 拖拽构造函数
// @param{实列成员}(id)



function Drag(id){
    // console.log(id);
    this.oBox = document.getElementById(id);
    // 鼠标在盒子中的坐标进行值初始化 默认为0
    this.mouseX = 0;
    this.mouseY = 0;
    // 需要加this赋值
    var _this = this;
    // 鼠标按下
    this.oBox.onmousedown=function(){
        console.log('按下...');
        // 因为相关事件比较猥琐 所以使用对象原型定义
        // 盒子初始化
        // console.log(this);
        _this.startDrag();
    }

}
// 在原型对象Drag.pototype上挂载方法
// startDrag方法名
Drag.prototype.startDrag = function(e){
    console.log('strat...');
    e = e || window.event;
    // 给构造函数的实例成员进行动态是赋值
    this.mouseX = e.pageX-this.oBox.offsetLeft;
    this.mouseX = e.pageX-this.oBox.offsetTop;
    var _this = this;
    // 两个事件拆分 一个是移动 一个是抬起
    document.onmousemove = function(){
        console.log(this);
        _this.moveDir();
    }
    document.onmouseup = function(){
        console.log(this);
        _this.upDir();
    }
}
// document.documentElement.classList可视区域的宽度
// 在原型对象Drag.pototype上挂载移动的方法
Drag.prototype.moveDir = function(e){
    console.log('move...');
     e=e||window.event;
      // 判断
      var oLeft = e.pageX-this.mouseX;
      var oTop = e.pageX-this.mouseY;
    // 控制决对定位的left和top
    var maxLeft = document.documentElement.clientWidth-this.oBox.offsetWidth;
    var maxTop = document.documentElement.clientHeight-this.oBox.offsetHeight;
    // 比较
    if(oLeft<0){
        oLeft=0;
    }
    if(oLeft>maxLeft){
        oLeft =maxLeft;
    }
    if(oTop<0){
        oTop=0;
    }
    if(oTop>maxTop){
        oTop = maxTop;
    }
    // 赋值
    this.oBox.style.left = oLeft+'px';
    this.oBox.style.top = oTop+'px';
  
}
// 在原型对象Drag.pototype上挂载抬起的方法
Drag.prototype.upDir = function(){
    console.log('up...');
}
